<template>
	<view class="page">
		<u-navbar
			title="封面选择"
			placeholder
			bgColor="#F8F8F8"
		>
			<view class="navbar__left" slot="left" @click="back">
				<text>取消</text>
			</view>
			<view class="navbar__right" slot="right" @click="submit">
				<view class="navbar__right--btn">完成</view>
			</view>
		</u-navbar>
		<view class="" style="margin: 10rpx;color: red;font-size: 25rpx;margin-left: 20rpx;">*封面图片宽和高至少200像素，最多选择3个</view>
		<view class="list" hover-class="clickable" v-for="(item,index) in imgs" :key="index" @click="changeImg(item,index)">
			<view class="list__left">
				<u-icon name="checkbox-mark" color="#ff4d4f" size="25" v-show="item.check"></u-icon>
			</view>
			<view class="list__right">
				<image :src="item.src" mode="aspectFill"></image>
			</view>
		</view>
		<no-data v-if="!imgs.length"></no-data>
	</view>
</template>

<script>
	import {sendBackFunction,imageStrigify} from '@/common/custom_util.js';
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				imgs: [],
				selectImgs: {}
			}
		},
		onLoad(options) {
			let imgs = JSON.parse(options.data);
			let selectImgs = JSON.parse(options.select);
			console.log(imgs)
			let temp = [];
			imgs.forEach((item,index) => {
				let flag = false;
				selectImgs.forEach((v,i) => {
					if(item.src == v.src) flag = true
				})
				temp.push({
					...item,
					check: flag,
				})
			})
			this.imgs = temp;
			// let imgs = JSON.parse(options.data);
			// let selectImgs = JSON.parse(options.select);
			// let temp = [];
			// for (let i = 0; i < imgs.length; i++) {
			// 	let item = imgs[i];
			// 	if(item.width < 200 || item.height < 200) continue
			// 	temp.push({
			// 		...item,
			// 		check: Object.keys(selectImgs).length && imageStrigify(item.src) == selectImgs.src ? true : false
			// 	})
			// }
			// this.imgs = temp;
			// this.selectImgs = selectImgs;
		},
		methods: {
			changeImg(v,i) {
				let check = !this.imgs[i].check;
				let count = 0;
				this.imgs.forEach(item => {
					if(item.check) count++;
				})
				if(count>=3 && check) return
				this.imgs[i].check = check;
			},
			back() {
				uni.navigateBack()
			},
			submit() {
				let temp = [];
				this.imgs.forEach(item => {
					if(item.check) temp.push(item)
				})
				sendBackFunction('setImg',temp);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
	}
	
	.navbar__right {
		
		&--btn {
			font-size: 30rpx;
			width: 100rpx;
			height: 60rpx;
			background-color: #40a9ff;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}
	
	.list {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 40rpx 20rpx;
		
		&__left {
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		&__right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 300rpx;
				height: 300rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
